<template>
  <video style="display: none;" width="640" height="360" controls>
    <source :src="JSON.parse(activeInfo.mpFileUrl).url" type="video/mp4">
    您的浏览器不支持视频标签。
  </video>

  <div class="content-box">
    <p class="active-name">{{ activeInfo.activityName }}</p>
    <p class="active-time">主办单位：{{ activeInfo.orgName }}</p>
    <div style="display: flex;justify-content: space-around;margin-bottom: 5px;">
      <p class="active-time">活动地点：{{ activeInfo.place }}</p>
      <p class="active-time">{{ activeInfo.startTime }}至{{ activeInfo.endTime }}</p>
    </div>

    <div class="img-box">
      <el-carousel height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <img :src="activeInfo.imgFileUrl1" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-html="activeInfo.activityIntroduction" class="txt-content" style="text-indent: 30px;"></div>
    <div style="width: 100%;">
      <video style="width: 100%;" controls>
        <source :src="activeInfo.mpFileUrl1" type="video/mp4">
        您的浏览器不支持视频标签。
      </video>
    </div>
    <div class="goods-box">
      <div :class="['icon-box', { 'active': active }]" @click="getGood">
        <img src="@/assets/menuIcon/hddz.svg" alt="" class="icon" />
      </div>
      <div class="goods-num">
        点赞数<span style="margin-left: 10px;font-size: 20px;">{{ activeInfo.likes }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, provide, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getDetail, setLike } from '@/api/evaluate/activite'
import { ElMessage } from 'element-plus'

const richContent = ref('')
let active = ref(false)
let activeInfo = ref({
})
let timer = null

const route = useRoute()
// 获取当前路由路径参数
const currentPath = route.query

const getGood = () => {
  timer = null
  //   toSetLike().then(() => {
  //     setTimeout(() => {
  //       getActiveInfo()
  //     }, 1000)
  //   })

  if (active.value) {
    // ElMessage({
    //   message: '点赞频繁，稍后再试',
    //   type: 'warning'
    // })
    return false
  } else {
    active.value = true
    toSetLike().then(() => {
      setTimeout(() => {
        getActiveInfo()
      }, 2000)

      setTimeout(() => {
        active.value = false
      }, 1000)
    })
  }
}
const getActiveInfo = () => {
  getDetail(currentPath.id).then(res => {
    const { imgFileUrl, mpFileUrl } = res.data
    activeInfo.value = res.data
    console.log(JSON.parse(imgFileUrl))
    activeInfo.value.imgFileUrl1 = JSON.parse(JSON.parse(imgFileUrl).url)[0]
    activeInfo.value.mpFileUrl1 = JSON.parse(mpFileUrl).url
  })
}
getActiveInfo()
// onMounted(() => {

// })
//点赞
const toSetLike = () => {
  return new Promise<void>((resolve, reject) => {
    setLike(currentPath.id).then(res => {
      ElMessage({
        message: '点赞成功',
        type: 'success'
      })
      resolve()
    })
  })
}

</script>
<style lang="scss" scoped>
.content-box {
  padding: 0 20px;
  // background: #75b0ed2e;
  padding-top: 10px;
  // height: 100vh;
  background: linear-gradient(to bottom, #75b0ed2e 0%, #51a2f82e 80%, #97c7fc2e 90%, #fff 100%);
}

.active-name {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-top: 0;
}

.active-time {
  text-align: center;
  font-size: 13px;
  margin: 5px 0;
}

.img-box {
  width: 100%;

  img {
    width: 100%;
    height: 100%;
  }
}

.txt-content {
  padding: 20px 0;
  line-height: 30px;
}

.goods-box {
  text-align: center;
  flex-direction: column;
  display: flex;
  align-items: center;
  margin-top: 10px;

  .icon-box {
    width: 50px;
    height: 50px;
    transition: transform 0.2s;

    &.active {
      animation: shake 1s;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .goods-num {
    height: 50px;
    margin-top: 10px
  }
}

@keyframes shake {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-8deg);
  }

  20% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(8deg);
  }

  40% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-8deg);
  }

  60% {
    transform: rotate(0deg);
  }

  70% {
    transform: rotate(8deg);
  }

  80% {
    transform: rotate(0deg);
  }

  90% {
    transform: rotate(-8deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
</style>


<!-- <template>
  <video style="display: none;" width="640" height="360" controls>
    <source :src="JSON.parse(activeInfo.mpFileUrl).url" type="video/mp4">
    您的浏览器不支持视频标签。
  </video>

  <div class="content-box">
    <p class="active-name">{{ activeInfo.activityName }}</p>
    <p class="active-time">主办单位：云阳县殡葬服务中心</p>
    <p class="active-time">{{ activeInfo.startTime }}至{{ activeInfo.endTime }}</p>
    <div class="img-box">
      <el-carousel height="150px">
        <el-carousel-item v-for="item in 4" :key="item">
          <img :src="activeInfo.imgFileUrl1" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-html="richContent" class="txt-content" style="text-indent: 30px;"></div>
    <div style="width: 100%;">
      <video style="width: 100%;" controls>
        <source :src="activeInfo.mpFileUrl1" type="video/mp4">
        您的浏览器不支持视频标签。
      </video>
    </div>
    <div class="goods-box">
      <div :class="['icon-box', { 'active': active }]" @click="getGood">
        <img src="@/assets/menuIcon/hddz.svg" alt="" class="icon" />
      </div>
      <div class="goods-num">
        点赞数<span style="margin-left: 10px;font-size: 20px;">{{ activeInfo.likes }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, provide } from 'vue'
import { useRoute } from 'vue-router'
import { fields, modelValue } from './config'
import { getDetail } from '@/api/evaluate/activite'
import { View, ChatDotRound } from '@element-plus/icons-vue'

import { ElLoading, ElMessage } from 'element-plus'
let activeInfo = ref({
})

const route = useRoute()
// 获取当前路由路径参数
const currentPath = route.query

const getActiveInfo = () => {
  getDetail(currentPath.id).then(res => {
    const { imgFileUrl, mpFileUrl } = res.data
    activeInfo.value = res.data
    activeInfo.value.imgFileUrl1 = JSON.parse(imgFileUrl).url
    activeInfo.value.mpFileUrl1 = JSON.parse(mpFileUrl).url
  })
}
getActiveInfo()

</script>
<style lang="scss" scoped>
.active-detail-msg {
  .el-row {
    height: 40px;
  }
}

.video-img-box {
  display: flex;
  height: 230px;
  // width: 90%;
  margin: 0 auto;
  justify-content: space-around;

  >div {
    width: 45%;
    padding: 10px;

    >div {
      border: 1px solid #eee;
      height: 164px;
      box-sizing: border-box;

      img,
      video {
        width: 100%;
        height: 100%;
      }
    }

    p {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      font-weight: bold;
      text-align: center;
    }
  }
}

.pageInfo-box {
  display: flex;
  justify-content: right;
  padding-top: 20px;
  padding-bottom: 10px;
}
</style> -->
